<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="nav-title">我的积分</view>
				<view class="nav-right">
					<text class="more-icon">⋯</text>
				</view>
			</view>
		</view>

		<!-- 积分概览区域 -->
		<view class="points-overview">
			<view class="overview-card">
				<text class="points-label">当前积分</text>
				<text class="points-amount">0</text>
				<view class="points-stats">
					<view class="stat-item">
						<text class="stat-value">0</text>
						<text class="stat-label">累计积分</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">0</text>
						<text class="stat-label">累计消费</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">0</text>
						<text class="stat-label">今日获得</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 积分商城入口 -->
		<view class="points-mall">
			<view class="mall-card" @click="navigateTo('points-mall')">
				<view class="mall-content">
					<view class="mall-info">
						<text class="mall-title">积分商城</text>
						<text class="mall-desc">用积分兑换精美礼品</text>
					</view>
					<view class="mall-icon">
						<text class="icon-text">🎁</text>
					</view>
				</view>
				<view class="mall-decoration">
					<view class="deco-circle circle-1"></view>
					<view class="deco-circle circle-2"></view>
				</view>
			</view>
		</view>

		<!-- 获取积分方式 -->
		<view class="earn-points-section">
			<view class="section-header">
				<text class="section-title">获取积分</text>
				<view class="title-line"></view>
			</view>
			
			<view class="earn-methods">
				<view class="method-item" @click="navigateTo('daily-checkin')">
					<view class="method-icon checkin-icon">
						<text class="icon-text">📅</text>
					</view>
					<view class="method-info">
						<text class="method-title">每日签到</text>
						<text class="method-desc">每天签到获得5积分</text>
					</view>
					<view class="method-reward">
						<text class="reward-text">+5</text>
					</view>
				</view>

				<view class="method-divider"></view>

				<view class="method-item" @click="navigateTo('complete-order')">
					<view class="method-icon order-icon">
						<text class="icon-text">🛒</text>
					</view>
					<view class="method-info">
						<text class="method-title">完成订单</text>
						<text class="method-desc">每完成一笔订单获得积分</text>
					</view>
					<view class="method-reward">
						<text class="reward-text">+10</text>
					</view>
				</view>

				<view class="method-divider"></view>

				<view class="method-item" @click="navigateTo('share-goods')">
					<view class="method-icon share-icon">
						<text class="icon-text">📤</text>
					</view>
					<view class="method-info">
						<text class="method-title">分享商品</text>
						<text class="method-desc">分享商品给好友获得积分</text>
					</view>
					<view class="method-reward">
						<text class="reward-text">+3</text>
					</view>
				</view>

				<view class="method-divider"></view>

				<view class="method-item" @click="navigateTo('write-review')">
					<view class="method-icon review-icon">
						<text class="icon-text">⭐</text>
					</view>
					<view class="method-info">
						<text class="method-title">评价商品</text>
						<text class="method-desc">对购买商品进行评价</text>
					</view>
					<view class="method-reward">
						<text class="reward-text">+8</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 积分记录 -->
		<view class="points-record">
			<view class="record-header">
				<text class="record-title">积分记录</text>
				<view class="view-all" @click="navigateTo('points-history')">
					<text class="view-all-text">查看全部</text>
					<text class="arrow">→</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state">
			<view class="empty-icon">⭐</view>
			<text class="empty-text">暂无记录</text>
			<text class="empty-desc">完成任务开始赚取积分吧</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pointsData: {
					currentPoints: 0,
					totalEarned: 0,
					totalSpent: 0,
					todayEarned: 0
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			
			navigateTo(page) {
				uni.showToast({
					title: `${page} 功能开发中`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	position: relative;
}

.status-bar {
	height: calc(var(--status-bar-height, 0) + 20rpx);
	background: transparent;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
}

.nav-left, .nav-right {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	position: relative;
}

.nav-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50rpx;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.nav-left:active::before {
	opacity: 1;
	transform: scale(1);
}

.nav-left:active {
	transform: scale(0.95);
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
	z-index: 1;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.more-icon {
	font-size: 36rpx;
	color: white;
	z-index: 1;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.nav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: white;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 积分概览区域 */
.points-overview {
	margin: 30rpx;
}

.overview-card {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	border-radius: 20rpx;
	padding: 40rpx 35rpx;
	box-shadow: 0 8rpx 25rpx rgba(52, 152, 219, 0.3);
	color: white;
	text-align: center;
}

.points-label {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 20rpx;
	display: block;
}

.points-amount {
	font-size: 80rpx;
	font-weight: 700;
	margin-bottom: 40rpx;
	display: block;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.points-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-value {
	font-size: 36rpx;
	font-weight: 600;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

/* 积分商城 */
.points-mall {
	margin: 0 30rpx 30rpx;
}

.mall-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	padding: 35rpx;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	position: relative;
	overflow: hidden;
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
}

.mall-card:active {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 35rpx rgba(102, 126, 234, 0.4);
}

.mall-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 2;
}

.mall-info {
	flex: 1;
}

.mall-title {
	font-size: 36rpx;
	font-weight: 700;
	color: white;
	margin-bottom: 12rpx;
	display: block;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.mall-desc {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.4;
}

.mall-icon {
	margin-left: 30rpx;
}

.icon-text {
	font-size: 60rpx;
}

.mall-decoration {
	position: absolute;
	top: 0;
	right: 0;
	width: 200rpx;
	height: 100%;
	pointer-events: none;
}

.deco-circle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
	width: 80rpx;
	height: 80rpx;
	top: 20rpx;
	right: 30rpx;
	animation: float 6s ease-in-out infinite;
}

.circle-2 {
	width: 50rpx;
	height: 50rpx;
	bottom: 30rpx;
	right: 50rpx;
	animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-15px); }
}

/* 获取积分方式 */
.earn-points-section {
	margin: 0 30rpx 30rpx;
}

.section-header {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #2c3e50;
}

.title-line {
	width: 40rpx;
	height: 3rpx;
	background: linear-gradient(90deg, #3498db, #2980b9);
	border-radius: 2rpx;
}

.earn-methods {
	background: white;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.method-item {
	display: flex;
	align-items: center;
	padding: 35rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.method-item:active {
	background: rgba(52, 152, 219, 0.05);
	transform: translateX(5rpx);
}

.method-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.checkin-icon {
	background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.order-icon {
	background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.share-icon {
	background: linear-gradient(135deg, #feca57, #ff9ff3);
}

.review-icon {
	background: linear-gradient(135deg, #a55eea, #26de81);
}

.method-info {
	flex: 1;
}

.method-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 8rpx;
	display: block;
}

.method-desc {
	font-size: 24rpx;
	color: #7f8c8d;
	line-height: 1.4;
}

.method-reward {
	margin-left: 20rpx;
}

.reward-text {
	font-size: 28rpx;
	font-weight: 700;
	color: #3498db;
	background: rgba(52, 152, 219, 0.1);
	padding: 8rpx 16rpx;
	border-radius: 16rpx;
}

.method-divider {
	height: 1rpx;
	background: linear-gradient(90deg, transparent, #ecf0f1, transparent);
	margin: 0 35rpx;
}

/* 积分记录 */
.points-record {
	margin: 0 30rpx 30rpx;
}

.record-header {
	background: white;
	border-radius: 20rpx;
	padding: 35rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid rgba(0, 0, 0, 0.04);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.record-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #2c3e50;
}

.view-all {
	display: flex;
	align-items: center;
	gap: 8rpx;
	cursor: pointer;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	transition: all 0.3s ease;
}

.view-all:active {
	background: rgba(52, 152, 219, 0.1);
}

.view-all-text {
	font-size: 26rpx;
	color: #3498db;
	font-weight: 500;
}

.arrow {
	font-size: 24rpx;
	color: #3498db;
	transition: transform 0.3s ease;
}

.view-all:active .arrow {
	transform: translateX(3rpx);
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80rpx 60rpx;
	background: white;
	margin: 0 30rpx 40rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.empty-icon {
	font-size: 100rpx;
	margin-bottom: 30rpx;
	display: block;
	opacity: 0.6;
}

.empty-text {
	font-size: 32rpx;
	color: #2c3e50;
	font-weight: 600;
	margin-bottom: 15rpx;
	display: block;
}

.empty-desc {
	font-size: 26rpx;
	color: #7f8c8d;
	line-height: 1.4;
}
</style>